Background Image control: use consistent button, ensure descriptive text accounts for no image selected #54711
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ext accounts for no image being selected
andrewserong
added
[Type] Bug
|
Size Change: -68 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
ramonjd
approved these changes
Sep 22, 2023
There was a problem hiding this comment.
This is a great improvement and feels more consistent with other media controls.
- Media replace flow component appears and works as expected
- Visually hidden text displays when there's no file selected
- Dragging and dropping on the Background Image control uploads the image and sets it as the background
Before
2023-09-22.12.50.51.mp4
After
2023-09-22.12.52.45.mp4
|
Thanks for the quick review, @ramonjd! 🙇 Since this PR implements the feedback on the previous PR and we're a little short on time before the feature freeze, I'll merge this in now. If anyone encounters any other issues to be addressed, I can look into them on Monday 🙂 |
andrewserong
deleted the
update/background-image-control-to-improve-accessibility
branch
andrewserong
added
the
Backport to Gutenberg RC
69 tasks
mikachan
pushed a commit
that referenced
this pull request
Sep 22, 2023
…ext accounts for no image selected (#54711) * Background Image control: use consistent button, ensure descriptive text accounts for no image being selected * only show crossed out line when a background image is not set
|
I just cherry-picked this PR to the release/16.7 branch to get it included in the next release: 6cd6ec6 |
mikachan
removed
the
Backport to Gutenberg RC
13 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Part of #54336, and a follow-up to #54439 and #53934.
Update the background image block support's control to use a consistent button (via the
MediaReplaceFlowcomponent) — this resolves an accessibility issue where upon selecting a media item (or closing the media library modal) focus would become lost, rather than be on the button.This also introduces another change, which is that the dropdown menu is available from the control's empty state, rather than immediately opening the media library. This is also desirable as it sets us up for further follow-ups where one of the options in the dropdown could be to set the background image to be the post's "featured image".
Why?
As raised in feedback on #54439, on
trunk, when you go to add a background image from the control's empty state, and select an image, after the image is added, focus is lost. This makes the UI harder to use for folks navigating the UI via keyboard.How?
MediaReplaceFlowcomponent for the background image block support's empty state, in addition to when an image is appliedTesting Instructions
Escape/ close the modal. The focus should be returned to the dropdown.Testing Instructions for Keyboard
As above, tab within the block inspector sidebar to the Background image control, and use the Enter key and cursor keys to select an image. With this PR active, you shouldn't unexpectedly experience focus loss when selecting an image.
Screenshots or screencast
Screengrab of adding a background image to a Group block. Note that after an image is selected, the focus is returned to the button as expected:
2023-09-22.11.26.45.mp4
This PR also tweaks the CSS slightly so that the crossed out line is only applied when no background image is set. This is noticeable when using a partially transparent image.